<template>
  <div class="zhtt-box">
    <div  @click="showTeamModal"><EllipsisOutlined></EllipsisOutlined></div>
    <a-modal v-model:visible="visible"
             title="请选择所属班组"
             okText="确定"
             cancelText="关闭"
             @ok="handleOk">
      <a-table :columns="columns" :data-source="dataList"  size="small">
        <template #action="{ record }">
      <span>
        <a @click="toSelected(record)">选择</a>
      </span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { TeamApi } from '@/views/team/js/team-api'
import { ResultModel } from '@/common/result.model'
import { TeamModel } from '@/views/team/js/team-model'
const columns = [
  {
    title: '班组名',
    dataIndex: 'name',
    key: 'name',
    slots: {
      title: 'customTitle',
      customRender: 'name'
    }
  },
  {
    title: '联系人',
    dataIndex: 'contactsPerson',
    key: 'contactsPerson'
  },
  {
    title: '操作',
    key: 'action',
    slots: { customRender: 'action' }
  }
]
export default defineComponent({
  name: 'team-modal',
  emits: {
    onSelectedTeam (item: TeamModel) {
      return item
    }
  },
  methods: {
    toSelected (item: TeamModel) {
      this.$emit('onSelectedTeam', item)
      this.visible = false
    },
    handleOk () {
      this.visible = false
    }
  },
  setup () {
    const visible = ref<boolean>(false)
    const dataList = ref([])
    const pageQuery = (name = null) => {
      TeamApi.query(1, 20, name).then(response => {
        console.log(response)
        if (ResultModel.isSuccessPageInfo(response)) {
          // eslint-disable-next-line no-return-assign
          response.data && response.data.dataList && response.data.dataList.forEach((item: TeamModel) => item.key = item.id)
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          dataList.value = response.data.dataList
        }
      })
    }
    pageQuery()
    const showTeamModal = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      visible.value = true
      pageQuery()
    }
    return {
      dataList,
      visible,
      showTeamModal,
      columns
    }
  }
})
</script>

<style scoped lang="less">
</style>
